<template>
  <a-form :form="form">
    <a-form-item label="经度">
      <a-input v-model="longitude" />
    </a-form-item>
    <a-form-item label="纬度">
      <a-input v-model="latitude" />
    </a-form-item>
    <a-form-item label="地址">
      <a-input v-model="address" />
    </a-form-item>
    <a-form-item>
      <a-button @click="getAddress">获取地址</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
// import { AForm, AFormItem, AInput } from "ant-design-vue";
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  name: "AddressInput",

  data() {
    return {
      form: this.$form.createForm(this),
      longitude: "",
      latitude: "",
      address: "",
    };
  },
  methods: {
    async getAddress() {
      if (this.longitude && this.latitude) {
        const AMap = await AMapLoader.load({
          key: "7bf1afe0a111e75bc96b5f5d0553b5f3",
          version: "2.0",
          // 需要用到的插件
          plugins: ["AMap.Geocoder", "AMap.AutoComplete"],
        });
        const geocoder = new AMap.Geocoder({
          radius: 1000,
          extensions: "all",
        });
        const lnglat = [this.longitude, this.latitude];
        geocoder.getAddress(lnglat, (status, result) => {
          if (status === "complete" && result.regeocode) {
            this.address = result.regeocode.formattedAddress;
          } else {
            this.$message.error("获取地址失败，请检查经纬度是否正确。");
          }
        });
      } else {
        this.$message.warning("请输入经度和纬度。");
      }
    },
  },
};
</script>
